<template>
	<wsPage title="主题服务列表">
		<div slot="page_operate">
			<Button  @click="refresh"><Icon type="refresh"></Icon><span>刷新</span></Button>
		</div>
		<wsSmPanel :page="table.page" @simple-query="query"  @page-change="query">
			<div slot="query_form">
				<Form :model="queryForm" :label-width="100">
					<FormItem label="类型">
						<RadioGroup v-model="queryForm.type" type="button" @on-change="queryParamChange">
					        <Radio label="1">上新</Radio>
					        <Radio label="2">折扣</Radio>
					    </RadioGroup>
			        </FormItem>
			        <FormItem label="主题区域">
						<RadioGroup v-model="queryForm.position" type="button" @on-change="queryParamChange">
							<Radio label="">全部</Radio>
					        <Radio :label="index + 1" v-for="(item, index) in fields.types">{{item}}</Radio>
					    </RadioGroup>
			        </FormItem>
			        <FormItem label="状态">
						<RadioGroup v-model="queryForm.status" type="button" @on-change="queryParamChange">
							<Radio label="2">已上架</Radio>
					        <Radio label="1">新增</Radio>
					        <Radio label="3">已下架</Radio>
					    </RadioGroup>
			        </FormItem>
					<FormItem label="分类">
						<RadioGroup  type="button"  v-model="queryForm.topicCategoryId" @on-change="changeTopicCategory">
							<Radio :label="item.id" v-for="(item,index) in (fields.topicCategorys)" :key="index">{{item.name}}</Radio>
					    </RadioGroup>
					</FormItem>	
					<FormItem label="名称">
			            <Input v-model="queryForm.name" placeholder="请输入" style="width: 70%;"></Input>
			       </FormItem>
				</Form>
			</div>
			<div slot="list_operate">
				<Select class="ws-form-select" v-model="queryForm.languageCode" @on-change="languageChange">
					<Option :value="item.code" v-for="item in fields.languages">{{item.motherTongue}}/{{item.english}}</Option>
				</Select>
				<Button  @click="showAddModal1">发布主题</Button>
			</div>
			<div slot="list_data">
				<ws-table :data="table.data" style="width: 100%">
					<ws-table-column  label="名称" min-width="180">
						<template slot-scope="scope">
							<div style="display:flex;height:100px;">
								<img :src="scope.row.coverImgUrl" alt="" style="width:160px;height:90px;">
								<span style="line-height:80px;margin-left:10px;">{{scope.row.name}}</span>
							</div>
							
						</template>	
					</ws-table-column>
					<ws-table-column prop="title" label="标题" min-width="180"></ws-table-column>
					<ws-table-column align="center" prop="topicCategoryName" label="分类" width="120">
						<!-- <template slot-scope="scope">
							<Tag v-if="scope.row.type == 1" color="green">上新</Tag>
							<Tag v-if="scope.row.type == 2" color="blue">折扣</Tag>
      					</template> -->
					</ws-table-column>
					<!-- <ws-table-column align="center" prop="position" label="上架区域" width="140">
						<template slot-scope="scope">
							<span>{{fields.types[scope.row.position - 1]}}</span>
      					</template>
					</ws-table-column> -->
					<ws-table-column align="center" label="语言" width="140">
						<template slot-scope="scope">
							<span>{{scope.row.motherTongue}}|{{scope.row.english}}</span>
      					</template>
					</ws-table-column>
					<ws-table-column align="center" prop="createDate" label="创建时间" width="140"></ws-table-column>
					<ws-table-column align="center" prop="userName" label="创建人" width="140"></ws-table-column>
					<ws-table-column align="center" prop="type" label="状态" width="120" fixed="right">
						<template slot-scope="scope">
							<Tag v-if="scope.row.status == 1">新增</Tag>
							<Tag v-if="scope.row.status == 2" color="green">已上架</Tag>
							<Tag v-if="scope.row.status == 3" color="blue">已下架</Tag>
      					</template>
					</ws-table-column>
					<ws-table-column align="center" width="120" label="操作" fixed="right">
						<template slot-scope="scope">
							<Button @click="openMask(scope.row)" type="text" size="small">预览</Button>
							<Button @click="onTopic(scope.row)" type="text" size="small" v-if="scope.row.status != 2">上架</Button>
							<Button @click="offTopic(scope.row)" type="text" size="small" v-if="scope.row.status == 2">下架</Button>
							<Button @click="showEditModal(scope.row)" type="text" size="small" v-if="scope.row.status != 2">编辑</Button>
							<Button @click="delTopic(scope.row)" type="text" size="small" v-if="scope.row.status != 2">删除</Button>
							<Button @click="modifyTopicCategory(scope.row)"  type="text" size="small" v-if="scope.row.topicCategoryName==''">选择主题分类</Button>
      					</template>
					</ws-table-column>
				</ws-table>
			</div>
		</wsSmPanel>
		<!-- 修改主题分类 -->
		<wsModal v-model="showModifyTopicCategory"  title="修改主题分类" ok-text="保存" @on-ok="ModifyTopicCategorySave" @on-cancel="ModifyTopicCategoryCancel" >
			<Form>
                <FormItem label="选择主题分类" required>
                    <Select clearable  class="ws-form-select" v-model="queryForm.topicCategoryId">
					    <Option :value="item.id" v-for="(item,index) in fields.topicCategorys" v-bind:key="index">{{item.name}}</Option>
                    </Select>
                </FormItem>
			</Form>
		</wsModal>
		
		<!-- preview start -->
		<div id="preview-mask">
			<div class="x-layer">
				<div class="inner-box">
					<div class="close-btn" @click="closeMask">
						<Icon type="close-round"></Icon>
					</div>
					<!-- A start -->
					<div class="layer-content" id="productDetail" style="overflow: hidden;">
					</div>
					<!-- A end -->
				</div>
			</div>
		</div>
		<!-- preview end -->		
		
	</wsPage>
</template>

<script>
	import Util from '../../../common/util.js';
	import Common from '../../../common/common.js';
	import $ from "jquery";
	
	export default {
		data() {
			return {
				showModifyTopicCategory:false, //默认不显示修改主题分类弹框
				//条件查询
				queryForm: {
					name: '',
					type:'1', //1.上新 2.折扣
					position: '', //全部
					status: '2', //1新增 2.已上架  3.已下架
					languageCode: 'zh',
					topicCategoryId:-1, //主题分类id					
				},
				table: {
					data: [],
					page: {
						total: 0, //总条数
						pageNum: 1, //当前页
						pageSize: 10 //每页显示条数
					}
				},
				fields: {
					types: ['轮播主题', '推荐主题', '单图主题', '商品关联主题'],
					languages: [],
					topicCategorys:[]
				},
				modifyTopic:{
					topicId:'' ,//主题id
				}
			}
		},
		computed: {
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				this.initLanguages();
				this.getTopicCategory();
				this.query();
			},
			/**
			 * 加载翻译语言列表
			 */
			initLanguages() {
				const _this = this;
				this.axios.get('/ws/ops/v2/languages/translatable').then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if(0 == resMeta.code) {
						_this.fields.languages = res.data;
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},			
			/**
			 * 表单查询
			 */
			query() {
				let pageSize = this.table.page.pageSize;
				let pageNum = this.table.page.pageNum;
				const _this = this;
				let queryData = this.queryForm;
				this.axios.get('/ws/ops/v2/topics/' + pageSize + '/' + pageNum, {params: queryData}).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.buildPageData(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 构建表格数据
			 */
			buildPageData(data_) {
				this.table.data = data_.list;
				this.table.page.total = data_.total;
			},	
			/**
			 * 语言切换
			 */
			languageChange(val) {
				this.table.data = [];
				this.table.page.total = 0;
				this.table.page.pageNum = 1; //当前页
				this.queryForm.topicCategoryId=-1;
				this.getTopicCategory();
				this.query();
				
			},
			/**
			 * 查询切换
			 */
			queryParamChange() {
				this.languageChange();
			},
			
			//刷新重置查询
			refresh(){
				this.queryForm.name = '';
				this.queryForm.type = '1'; //1.上新 2.折扣
				this.queryForm.position = '';
				this.queryForm.status = '2';
				this.queryForm.topicCategoryId=-1;
				this.table.data = [];
				this.table.page.total = 0;
				this.table.page.pageNum = 1; //当前页
				this.table.page.pageSize = 10; //每页显示条数
				this.query();
			},
            /**
			 * 打开新增模态框
			 */
			showAddModal(){
				this.$router.push({name:'ops_topic_add'});
			},
			showAddModal1(){
				this.$router.push({name:'ops_topic_new'});
			},
			/**
			 * 主题上架
			 */
			onTopic(row_) {
				const _this = this;
				this.$confirm({
        			title: '操作提示',
        			width: 300,
        			content: '请确认上架该主题?',
        			onOk: function() {
        				_this.openTopic(row_.id);
        			}
        		});	
			},
			/**
			 * 主题上架
			 */
			openTopic(topicId) {
				let _this = this;
				this.axios.put('/ws/ops/v2/topic/open/' + topicId).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.$Message.info('主题上架成功');
						_this.query();
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 主题上架
			 */
			offTopic(row_) {
				const _this = this;
				this.$confirm({
        			title: '操作提示',
        			width: 300,
        			content: '请确认下架该主题?',
        			onOk: function() {
        				_this.closeTopic(row_.id);
        			}
        		});	
			},
			/**
			 * 主题上架
			 */
			closeTopic(topicId) {
				let _this = this;
				this.axios.put('/ws/ops/v2/topic/close/' + topicId).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.$Message.info('主题下架成功');
						_this.query();
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 删除主题
			 */
			delTopic(row_) {
				const _this = this;
				this.$confirm({
        			title: '操作提示',
        			width: 300,
        			content: '请确认是否要删除该主题?',
        			onOk: function() {
        				_this.delConfirmTopic(row_.id);
        			}
        		});	
			},
			/**
			 * 确认删除主题
			 */
			delConfirmTopic(topicId) {
				let _this = this;
				this.axios.delete('/ws/ops/v2/topic/' + topicId).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.$Message.info('主题删除成功');
						_this.query();
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});				
			},
			/*预览页面居中*/
			resize() {
				var winHeight = $(window).height();
				if(winHeight < 790) {
					$(".x-layer").css({
						display: "block"
					});
					$(".inner-box").css({
						margin: "50px auto"
					});
				} else {
					$(".x-layer").css({
						display: "flex"
					});
					$(".inner-box").css({
						margin: "auto"
					});
				}
			},
			controlMask(flag, topicId) {
				var _this = this;
				if(flag) {
					let html = '<iframe src="https://api.beautystudio.com.cn/h5/#/topic/'+topicId+'?language=zh&currency=CNY" width="355px" height="767px"></iframe>';
					$("#preview-mask .x-layer .layer-content").html(html);
					$("#preview-mask").show();
					$("html").css("fontSize", "26.88px");
					_this.resize();
					$(window).resize(function(event) {
						_this.resize();
					});
				} else {
					$("#preview-mask").hide();
					$("html").css("fontSize", "auto");
				}
			},
			openMask(obj) {
				let topicId = obj.id;
				this.controlMask(true, topicId);
			},
			closeMask() {
				this.controlMask(false);
			},
			/**
			 * 显示编辑页面
			 */
			showEditModal(row_) {
				let topicId = row_.id;
				this.$router.push({
					name: "ops_topic_modify",
					query: {
						topicId: topicId
					}
				});
			},
			/**
			 * 获取对应语言下的主题分类列表
			 * 
			 */
			getTopicCategory(){
				this.axios.get('/ws/ops/topic/categorys?languageCode='+this.queryForm.languageCode).then(response=>{
					let res=response.data;
					let resMeta=res.meta;
					if(0==resMeta.code){
						this.fields.topicCategorys=res.data;
					}else{
						this.$Message.warning(resMeta.message);
					}
				})
			},
			/**
			 * 
			 * 修改对应主题中的主题分类
			 */
			modifyTopicCategory(_row){
				this.showModifyTopicCategory=true; //显示修改主题分类弹框
				this.modifyTopic.topicId=_row.id; //对应的主题id				
					
			},

			/**
			 * 改变主题分类--获得新的主题列表
			 */
			changeTopicCategory(){
				this.query();
			},
			/**
			 * 修改保存对应主题下的主题分类
			 */
			ModifyTopicCategorySave(){
				let topicCategoryId=this.queryForm.topicCategoryId; //对应的所选择的主题分类id
				this.axios.put('/ws/ops/v2/topic/category/'+topicCategoryId+'/'+this.modifyTopic.topicId).then(response=>{
					let res=response.data;
					let resMeta=res.meta;
					if(0==resMeta.code){
						this.$Message.info('修改成功');
						this.showModifyTopicCategory=false; //隐藏修改主题分类弹框
						this.query();
						this.queryForm.topicCategoryId=-1;
					}else{
						this.$Message.warning(resMeta.message);
					}
				})
			},
			/**
			 * 取消保存对应主题下的主题分类
			 * 
			 */
			ModifyTopicCategoryCancel(){
				this.showModifyTopicCategory=false; //隐藏修改主题分类弹框
			}

		}
	}
</script>

<style scoped>
	.ws-form-select {
		width: 162px;
	}
	.title-row {
		padding: 10px;
	}
	.tab-demo {
		margin-bottom: 10px;
	}
	
	#preview-mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;
		overflow: auto;
		display: none;
	}
	
	#preview-mask .x-layer {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	#preview-mask .x-layer .inner-box {
		width: 384px;
		height: 810px;
		position: relative;
		background: url(../../../assets/images/product/iphonex.png) no-repeat;
	}
	
	#preview-mask .x-layer .inner-box .close-btn {
		position: absolute;
		top: -15px;
		right: -15px;
		font-size: 20px;
		text-align: center;
		line-height: 26px;
		width: 30px;
		height: 30px;
		color: #fff;
		border: 1px solid #fff;
		border-radius: 50%;
		cursor: pointer;
	}
	
	#preview-mask .x-layer .inner-box .layer-content {
		position: absolute;
		border-radius: 40px;
		top: 21px;
		left: 21px;
		width: 338px;
		height: 767px;
		border: 1px solid #999;
		background: #f9f9f9;
		overflow-x: auto;
	}
	
	#preview-mask .x-layer .inner-box .detail-more {
		position: absolute;
		border-radius: 40px;
		top: 21px;
		left: 21px;
		width: 338px;
		height: 767px;
		border: 1px solid #999;
		background: #f9f9f9;
	}
	
</style>